import React, {
  JSX,
  createContext,
  useContext,
  useState,
  useEffect,
  useCallback,
} from 'react';
import {ImageBackground, StyleSheet, ScrollView} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {StatusBarHeight} from '../../config/devices';
import RedEnvlope from './components/RedEnvelope';
import SigninSheet from './components/SignInSheet';
import TaskCard from './components/TaskCard';
import {getLastSevenDays} from '../../utils/utils';
import {useTranslation} from 'react-i18next';
import DailyTask, {STATUS} from './components/DailyTask';
import { normalize } from '../../utils/adapter';

export type SiginItem = {
  label: string;
  value: number;
};

type State = {
  redNum: number;
  maxSign: number;
  siginList: Array<SiginItem>;
  sigineds: Array<SiginItem>;
};

type Value = {
  setState: (item: any) => void;
} & State;

const MakeMoneyContext = createContext<Value | undefined>(undefined);

const initialState: State = {
  redNum: 6238,
  maxSign: 7,
  siginList: [],
  sigineds: [],
};

const createSiginList = () => {
  return getLastSevenDays(initialState.maxSign).map((date, index) => ({
    label: date,
    value: index + 1,
  }));
};

const Header = React.memo(function () {
  return (
    <ImageBackground
      style={styles.header_container}
      source={require('../../assets/images/my_red_bg.png')}>
      <RedEnvlope />
      <SigninSheet />
    </ImageBackground>
  );
});

function MakeMoneyScreen(): JSX.Element {
  const [state, setState] = useState<State>(initialState);
  const {t} = useTranslation();

  useEffect(() => {
    const siginList = createSiginList();
    setState({...state, siginList});
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);


  const set = useCallback(
    (item: Object): void => {
      setState({...state, ...item});
    },
    [state],
  );

  return (
    <MakeMoneyContext.Provider value={{...state, setState: set}}>
      <ScrollView style={{flex: 1}}>
        <LinearGradient
          colors={['#F7E6D6', '#F6F6F6']}
          style={styles.mian_container}>
          <Header />
          <TaskCard title={t('taskTitle')}>
            <DailyTask
              icon={require('../../assets/images/ad.png')}
              title="看广告赚红包"
              subTitle="看广告直接领钱，今日还剩9次"
              goldCoin={1000}
              status={STATUS.去领取}
            />
            <DailyTask
              icon={require('../../assets/images/ad_10.png')}
              title="今日看10个广告领奖"
              subTitle="观看短剧领取，已完成0/10"
              goldCoin={1000}
              status={STATUS.进行中}
            />
            <DailyTask
              icon={require('../../assets/images/episodes.png')}
              title="今日观看10集短剧"
              subTitle="观看短剧领取，已完成0/10"
              goldCoin={1000}
              status={STATUS.进行中}
            />
            <DailyTask
              icon={require('../../assets/images/ad.png')}
              title="看广告赚红包"
              subTitle="看广告直接领钱，今日还剩9次"
              goldCoin={1000}
              status={STATUS.已完成}
            />
            <DailyTask
              icon={require('../../assets/images/ad.png')}
              title="看广告赚红包"
              subTitle="看广告直接领钱，今日还剩9次"
              goldCoin={1000}
              status={STATUS.去领取}
            />
            <DailyTask
              icon={require('../../assets/images/ad.png')}
              title="看广告赚红包"
              subTitle="看广告直接领钱，今日还剩9次"
              goldCoin={1000}
              status={STATUS.去领取}
            />
            <DailyTask
              icon={require('../../assets/images/ad.png')}
              title="看广告赚红包"
              subTitle="看广告直接领钱，今日还剩9次"
              goldCoin={1000}
              status={STATUS.去领取}
            />
            <DailyTask
              icon={require('../../assets/images/ad.png')}
              title="看广告赚红包"
              subTitle="看广告直接领钱，今日还剩9次"
              goldCoin={1000}
              status={STATUS.去领取}
            />
          </TaskCard>
        </LinearGradient>
      </ScrollView>
    </MakeMoneyContext.Provider>
  );
}

const styles = StyleSheet.create({
  mian_container: {
    flex: 1,
  },
  header_container: {
    height: normalize(322),
    paddingTop: normalize((StatusBarHeight as number) + 30),
  },
});

export const useMakeMoneyContext = function () {
  const ctx = useContext(MakeMoneyContext);
  return ctx;
};

export default MakeMoneyScreen;
